/** 
  专家选择
*/
<template>
  <div>
    <self-condition-card :parentId="'expertsInfo'" @reset="resetExperts" @search="filterExperts" label-position="right" label-width="150px">
      <el-row :gutter="24" style="height: 50px;">
        <el-col :span="8">
          <el-form-item :label="$t('baseAssessSetting.affiliation')">
            <el-input v-model="queryForm.condition.department" clearable :maxlength="64" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('baseAssessSetting.sex')">
            <el-select v-model="queryForm.condition.sex" clearable style="width: 100%">
              <el-option
                v-for="item in options.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('baseAssessSetting.proTitle')">
            <el-select v-model="queryForm.condition.proTitle" filterable clearable style="width: 100%">
              <el-option
                v-for="item in options.proTitle"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </self-condition-card>
    <el-card shadow="never" body-style="padding: 24px;">
      <div ></div>
      <div class="float-left">
        <el-input
          v-model="queryForm.condition.name"
          :placeholder="$t('baseAssessSetting.pleaseInputNameToFilter')"
          style="width:250px"
          @keyup.enter.native="filter">
            <i slot="suffix"
              class="el-icon-search"
              style="margin-top:10px;cursor:pointer"
              @click="filter">
            </i>
        </el-input>
      </div>
      <div class="float-right">
        <el-button type="primary" @click="confirm">{{$t('common.btn.confirm')}}</el-button>
      </div>
      <self-edu-table style="margin-top: 50px;" ref="expertsInfoChoose" :getRowKey="getRowKey" :pagination="false" :order='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('baseAssessSetting.name')" prop="name"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.sex')" prop="sexTranslate"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.age')" prop="age"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.affiliation')" prop="department"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.proTitle')" prop="proTitle"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.contactPhone')" prop="contactPhone"></edu-table-column>
        <edu-table-column :label="$t('baseAssessSetting.introduction')" prop="introduction"></edu-table-column>
      </self-edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
  
<script>
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent';
import selfConditionCard from '../common/selfConditionCard';
import selfEduTable from '../common/selfEduTable';
export default {
  components: {
    'self-condition-card': selfConditionCard,
    'self-edu-table': selfEduTable
  },
  data () {
    return {
      queryForm: {
        "pageNum_": 1,
        "pageSize_": 20,
        "total_": 0,
        "condition": {
          "category": "1",
          "department": "",
          "sex": "",
          "proTitle": "",
          "name": ""
        }
      },
      options: {
        sex: [], // 性别
        proTitle: [] // 职称
      },
      dataList: [],
      multipleSelection: []
    };
  },
  created() {
    this.initOptions()
    this.filterExperts(this.queryForm)
  },
  methods: {
    async initOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: [
          "G_XBIE", // 性别
          "profession" // 职称
        ]
      }
      await queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            sex: "G_XBIE", // 性别
            proTitle: "profession" // 职称
          },
          res.data,
          this.options
        )
      })
    },
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback()
      }
    },
    getRowKey(row) {
      return row.id
    },
    // 重置专家筛选条件
    resetExperts() {
      this.queryForm.condition.department = ''
      this.queryForm.condition.sex = ''
      this.queryForm.condition.proTitle = ''
      this.queryForm.condition.name = ''
      this.$refs.expertsInfoChoose.clearSelection();
      this.filterExperts()
    },
    // 查询专家筛选条件
    filterExperts() {
      this.queryForm.pageNum_ = 1
      this.getListData()
    },
    // 获取专家数据
    getListData() {
      let queryForm = JSON.parse(JSON.stringify(this.queryForm))
      queryForm.condition.proTitle = UTILS.translateLabel(this.options.proTitle, queryForm.condition.proTitle, 'value', 'label')
      queryForm.condition.department = queryForm.condition.department.trim()
      queryForm.condition.name = queryForm.condition.name.trim()
      graduateStudentApi.approveAgree(queryForm).then((res) => {
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    // 筛选姓名
    filter() {
      this.filterExperts()
    },
    // 确定筛选的姓名
    confirm() {
      if (this.multipleSelection.length === 0) {
        this.$eduConfirm(this.$t('baseAssessSetting.notChooseExperts')).then(_ => {})
        return
      }
      this.$emit('close-experts-info')
      this.$emit('filter-experts-info', this.multipleSelection)
      this.resetExperts()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.getListData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getListData()
    }
  }
}
</script>

<style>

</style>